﻿<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>后台管理系统登录</title>
		<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
		<style>
			* {
				margin: 0;
				padding: 0;
				box-sizing: border-box;
				font-family: 'Microsoft YaHei', sans-serif;
			}

			body {
				background: linear-gradient(135deg, #1c77ac 0%, #2a92d0 100%);
				background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200" viewBox="0 0 200 200"><circle cx="100" cy="100" r="80" fill="rgba(255,255,255,0.1)" /></svg>');
				background-position: center top;
				background-repeat: no-repeat;
				background-size: cover;
				min-height: 100vh;
				overflow: hidden;
				display: flex;
				justify-content: center;
				align-items: center;
				position: relative;
			}

			.cloud {
				position: absolute;
				background: rgba(255, 255, 255, 0.8);
				border-radius: 50%;
				filter: blur(30px);
				z-index: 1;
			}

			#cloud1 {
				width: 150px;
				height: 50px;
				top: 50px;
				left: 10%;
				animation: float 30s infinite linear;
			}

			#cloud2 {
				width: 200px;
				height: 70px;
				top: 120px;
				right: 15%;
				animation: float 40s infinite linear reverse;
			}

			@keyframes float {
				0% {
					transform: translateX(-50px);
				}

				100% {
					transform: translateX(calc(100vw + 200px));
				}
			}

			.logintop {
				position: absolute;
				top: 0;
				left: 0;
				right: 0;
				height: 60px;
				background: #2387CB;
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 0 50px;
				color: #fff;
				font-size: 18px;
				z-index: 10;
			}

			.logintop ul {
				display: flex;
				list-style: none;
			}

			.logintop ul li {
				margin-left: 25px;
			}

			.logintop ul li a {
				color: rgba(255, 255, 255, 0.8);
				text-decoration: none;
				transition: all 0.3s ease;
			}

			.logintop ul li a:hover {
				color: #fff;
				text-decoration: underline;
			}

			.login-container {
				position: relative;
				z-index: 2;
				width: 850px;
				display: flex;
				background: rgba(255, 255, 255, 0.1);
				backdrop-filter: blur(10px);
				border-radius: 15px;
				overflow: hidden;
				box-shadow: 0 15px 35px rgba(0, 0, 0, 0.25);
			}

			.welcome-panel {
				flex: 1;
				background: linear-gradient(135deg, #2d9ae6 0%, #0d5c91 100%);
				padding: 50px 40px;
				color: white;
				display: flex;
				flex-direction: column;
				justify-content: center;
			}

			.system-logo {
				font-size: 48px;
				margin-bottom: 25px;
				text-align: center;
				color: rgba(255, 255, 255, 0.9);
			}

			.welcome-title {
				font-size: 28px;
				margin-bottom: 15px;
			}

			.welcome-text {
				font-size: 15px;
				line-height: 1.7;
				opacity: 0.9;
			}

			.features {
				margin-top: 25px;
			}

			.feature-item {
				display: flex;
				align-items: center;
				margin-bottom: 15px;
			}

			.feature-item i {
				margin-right: 10px;
				background: rgba(255, 255, 255, 0.2);
				width: 30px;
				height: 30px;
				border-radius: 50%;
				display: flex;
				align-items: center;
				justify-content: center;
			}

			.login-form {
				width: 400px;
				background: white;
				padding: 50px 40px;
				display: flex;
				flex-direction: column;
			}

			.form-title {
				font-size: 24px;
				color: #333;
				margin-bottom: 30px;
				text-align: center;
				position: relative;
				padding-bottom: 15px;
			}

			.form-title::after {
				content: "";
				position: absolute;
				bottom: 0;
				left: 50%;
				transform: translateX(-50%);
				width: 80px;
				height: 3px;
				background: linear-gradient(to right, #1c77ac, #2a92d0);
			}

			.input-group {
				position: relative;
				margin-bottom: 20px;
			}

			.input-group i {
				position: absolute;
				left: 15px;
				top: 50%;
				transform: translateY(-50%);
				color: #999;
				z-index: 2;
			}

			.form-input {
				width: 100%;
				height: 46px;
				border: 1px solid #ddd;
				border-radius: 5px;
				padding: 0 15px 0 45px;
				font-size: 15px;
				transition: all 0.3s ease;
			}

			.form-input:focus {
				border-color: #2a92d0;
				box-shadow: 0 0 10px rgba(42, 146, 208, 0.3);
				outline: none;
			}

			.role-select {
				width: 100%;
				height: 46px;
				border: 1px solid #ddd;
				border-radius: 5px;
				padding: 0 15px 0 45px;
				font-size: 15px;
				color: #666;
				background: white;
				appearance: none;
				-webkit-appearance: none;
				background-image: url('data:image/svg+xml;utf8,<svg fill="gray" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M7 10l5 5 5-5z"/></svg>');
				background-repeat: no-repeat;
				background-position: right 10px center;
				background-size: 20px;
				transition: all 0.3s ease;
			}

			.role-select:focus {
				border-color: #2a92d0;
				box-shadow: 0 0 10px rgba(42, 146, 208, 0.3);
				outline: none;
			}

			.options-row {
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin: 15px 0 25px;
				font-size: 14px;
				color: #666;
			}

			.remember {
				display: flex;
				align-items: center;
			}

			.remember input {
				margin-right: 8px;
			}

			.forgot-password {
				color: #2a92d0;
				text-decoration: none;
				transition: color 0.3s ease;
			}

			.forgot-password:hover {
				color: #1c77ac;
				text-decoration: underline;
			}

			.login-btn {
				height: 48px;
				background: linear-gradient(to right, #1c77ac, #2a92d0);
				border: none;
				border-radius: 5px;
				color: white;
				font-size: 16px;
				font-weight: 600;
				cursor: pointer;
				transition: all 0.3s ease;
				margin-bottom: 20px;
			}

			.login-btn:hover {
				background: linear-gradient(to right, #166092, #1c77ac);
				box-shadow: 0 5px 15px rgba(28, 119, 172, 0.4);
				transform: translateY(-2px);
			}

			.divider {
				text-align: center;
				position: relative;
				margin: 20px 0;
				color: #999;
				font-size: 14px;
			}

			.divider::before,
			.divider::after {
				content: "";
				position: absolute;
				top: 50%;
				width: 40%;
				height: 1px;
				background: #eee;
			}

			.divider::before {
				left: 0;
			}

			.divider::after {
				right: 0;
			}

			.social-login {
				display: flex;
				justify-content: center;
				gap: 20px;
				margin-bottom: 20px;
			}

			.social-btn {
				width: 42px;
				height: 42px;
				border-radius: 50%;
				background: white;
				border: 1px solid #eee;
				display: flex;
				align-items: center;
				justify-content: center;
				color: #666;
				font-size: 18px;
				cursor: pointer;
				transition: all 0.3s ease;
			}

			.social-btn:hover {
				transform: translateY(-3px);
				box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
			}

			.social-btn.qq {
				color: #12B7F5;
			}

			.social-btn.wechat {
				color: #2AAB49;
			}

			.social-btn.github {
				color: #333;
			}

			.register-link {
				text-align: center;
				color: #666;
				font-size: 14px;
			}

			.register-link a {
				color: #2a92d0;
				text-decoration: none;
				font-weight: 500;
			}

			.register-link a:hover {
				text-decoration: underline;
			}

			.loginbm {
				position: absolute;
				bottom: 15px;
				width: 100%;
				text-align: center;
				color: rgba(255, 255, 255, 0.7);
				font-size: 13px;
				z-index: 10;
			}

			.loginbm a {
				color: rgba(255, 255, 255, 0.9);
				text-decoration: none;
				margin: 0 5px;
			}

			.loginbm a:hover {
				text-decoration: underline;
			}

			@media (max-width: 900px) {
				.login-container {
					width: 90%;
					flex-direction: column;
				}

				.welcome-panel {
					padding: 30px;
				}

				.login-form {
					width: 100%;
				}
			}
		</style>
	</head>
	<body>
		<!-- <div class="logintop">
			<span>智能医疗教育协同营养干预云平台</span>
			<ul>
				<li><a href="#"><i class="fas fa-home"></i> 首页</a></li>
				<li><a href="#"><i class="fas fa-question-circle"></i> 帮助</a></li>
				<li><a href="#"><i class="fas fa-info-circle"></i> 关于</a></li>
			</ul>
		</div> -->

		<div id="cloud1" class="cloud"></div>
		<div id="cloud2" class="cloud"></div>

		<div class="login-container">
			<div class="welcome-panel">
				<div class="system-logo">
					<img src="img/logo.jpg">
				</div>
				<h2 class="welcome-title"></h2>
				<p class="welcome-text">
					平台集成医院护理工作站，临床医生工作站，营养医生工作，收费工作站，进销存工作，Pad移动工作站。<br />
					通过统一入口可以高效管理营养科各项资源与权限。
				</p>
				<div class="features">
					<div class="feature-item">
						<i class="fas fa-lock"></i>
						<span>基于角色的访问控制</span>
					</div>
					<div class="feature-item">
						<i class="fas fa-shield-alt"></i>
						<span>企业级安全保护</span>
					</div>
					<div class="feature-item">
						<i class="fas fa-sync-alt"></i>
						<span>实时数据同步</span>
					</div>
				</div>
			</div>

			<div class="login-form">
				<h2 class="form-title">账户登录</h2>

				<div class="input-group">
					<i class="fas fa-user"></i>
					<input type="text" class="form-input" placeholder="请输入用户名" value="">
				</div>

				<div class="input-group">
					<i class="fas fa-lock"></i>
					<input type="password" class="form-input" placeholder="请输入密码" value="">
				</div>

				<!-- 新增的下拉选择框 -->
				<div class="input-group">
					<i class="fas fa-user-tag"></i>
					<select class="role-select">
						<option value="admin" selected>系统管理员</option>
						<option value="operator">操作员</option>
						<option value="auditor">审计员</option>
						<option value="support">技术支持</option>
					</select>
				</div>

				<!-- <div class="options-row">
                <label class="remember">
                    <input type="checkbox" checked> 记住密码
                </label>
                <a href="#" class="forgot-password">忘记密码？</a>
            </div> -->

				<button class="login-btn" onclick="javascript:window.location.href='main.html'">登 录</button>

				<div class="divider">其他登录方式</div>

				<div class="social-login">
					<div class="social-btn qq">
						<i class="fab fa-qq"></i>
					</div>
					<div class="social-btn wechat">
						<i class="fab fa-weixin"></i>
					</div>
					<div class="social-btn github">
						<i class="fab fa-github"></i>
					</div>
				</div>

				<!-- <div class="register-link">
                没有账户？ <a href="#">立即注册</a>
            </div> -->
			</div>
		</div>

		<div class="loginbm">
			版权所有 © 2023 企业资源管理系统 <a href="#">用户协议</a> | <a href="#">隐私政策</a>
			<!-- 原代码的版权信息保留 -->
			<div style="margin-top: 5px">基于原代码修改，<a href="http://www.uimaker.com">uimaker.com</a> 仅供学习交流</div>
		</div>

		<script>
			document.addEventListener('DOMContentLoaded', function() {
				// 登录按钮交互效果
				const loginBtn = document.querySelector('.login-btn');

				loginBtn.addEventListener('click', function() {
					// 添加按下效果
					this.style.transform = 'translateY(2px)';
					this.style.boxShadow = 'none';

					// 模拟登录过程
					setTimeout(() => {
						this.style.transform = '';
						this.style.boxShadow = '';
						alert('登录请求已发送，正在验证...');
					}, 200);
				});

				// 输入框聚焦效果
				const inputs = document.querySelectorAll('.form-input, .role-select');
				inputs.forEach(input => {
					input.addEventListener('focus', function() {
						this.parentNode.style.transform = 'scale(1.02)';
						this.parentNode.style.zIndex = '10';
					});

					input.addEventListener('blur', function() {
						this.parentNode.style.transform = '';
						this.parentNode.style.zIndex = '1';
					});
				});

				// 云端浮动效果
				const clouds = document.querySelectorAll('.cloud');
				setInterval(() => {
					clouds.forEach(cloud => {
						const currentLeft = parseFloat(getComputedStyle(cloud).left);
						cloud.style.left = (currentLeft + 0.1) + 'px';

						if (currentLeft > window.innerWidth) {
							cloud.style.left = '-200px';
						}
					});
				}, 50);
			});
		</script>
	</body>
</html>